<template>
  <div class="contents">
    <div class="rankingModule">
      <el-row type="flex" align="middle">
        <el-col :span="4">
          <span class="_icons"></span>
          <span>司机绩效排名</span>
        </el-col>
        <el-col :span="18">
          <div style="display: flex; align-items: center;">
            <el-radio-group
              v-model="radio1"
              size="small"
              style="margin: 0 15px;"
            >
              <el-radio-button label="昨日"></el-radio-button>
              <el-radio-button label="近7日"></el-radio-button>
              <el-radio-button label="近30天"></el-radio-button>
            </el-radio-group>
            <el-date-picker
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 200px;"
            ></el-date-picker>
          </div>
        </el-col>
        <el-col :span="13">
          <el-radio-group v-model="radio2" size="small">
            <el-radio-button label="按下单金额"></el-radio-button>
            <el-radio-button label="按发货金额"></el-radio-button>
            <el-radio-button label="按结算金额"></el-radio-button>
            <el-radio-button label="按新客户数"></el-radio-button>
          </el-radio-group>
        </el-col>
      </el-row>
      <!-- 图表 -->
      <div
        id="tableimgleft"
        style="width: 100%; height: 280px;"
        ref="tableimgleft"
      ></div>
    </div>
    <div class="divider"></div>
    <div style="margin-top: 20px; padding: 0px 20px 10px;">
      <el-form :inline="true">
        <el-form-item label="搜索:">
          <el-select placeholder="请选择">
            <el-option
              v-for="item in opt1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">查询</el-button>
          <el-dropdown style="margin-left: 10px;">
            <el-button>
              导出
              <i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>按业务员统计</el-dropdown-item>
              <el-dropdown-item>按客户统计</el-dropdown-item>
              <el-dropdown-item>按分类统计</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-form-item>
      </el-form>
      <el-table :data="table1" style="width: 100%; margin-top: 10px;">
        <el-table-column type="index" width="50" label="序号"></el-table-column>
        <el-table-column label="业务员名称" width="120px"></el-table-column>
        <el-table-column
          sortable
          label="新客户"
          width="100px"
        ></el-table-column>
        <el-table-column
          sortable
          label="新客户下单"
          width="120px"
        ></el-table-column>
        <el-table-column
          sortable
          label="新客户下单金额"
          width="150px"
        ></el-table-column>
        <el-table-column
          sortable
          label="新客户发货金额"
          width="150px"
        ></el-table-column>
        <el-table-column
          sortable
          label="新客户结算金额"
          width="150px"
        ></el-table-column>
        <el-table-column
          sortable
          label="下单金额"
          width="100px"
        ></el-table-column>
        <el-table-column label="发货金额"></el-table-column>
        <el-table-column label="操作"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="total, prev, pager, next,sizes"
        :page-size="10"
        :page-sizes="[20, 30, 50, 100]"
        style="text-align: right;"
        :total="0"
      />
    </div>
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  export default {
    data() {
      return {
        radio1: '近30天',
        radio2: '按下单金额',
        option: {
          title: {
            text: '',
            textStyle: {
              fontSize: 14, //字体大小
            },
          },
          xAxis: {
            type: 'category',
            data: ['', '', '', '', '', ''],
          },
          yAxis: {
            type: 'value',
          },
          series: [
            {
              data: [0, 0, 0, 0, 0, 0, 0],
              type: 'line',
            },
          ],
        },
        table1: [],
        opt1: [
          {
            value: 0,
            label: '全部',
          },
        ],
      }
    },
    mounted() {
      echarts
        .init(document.getElementById('tableimgleft'))
        .setOption(this.option)
    },
  }
</script>

<style lang="scss" scoped>
  .contents {
    padding: 10px 20px;

    .rankingModule {
      margin: 10px 0 40px;

      ._icons {
        display: inline-block;
        width: 3px;
        height: 12px;
        background: #333;
        margin-right: 5px;
      }
    }

    .divider {
      height: 16px;
      background: #f2f3f5;
      width: 100%;
    }
  }
</style>
